<%--@elvariable id="pageInfo" type="java.util.HashMap"--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/11/17
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>房屋列表</title>
	<%
		pageContext.setAttribute("APP_PATH", request.getContextPath());
	%>
	<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="${APP_PATH}/static/css/common_style.css" rel="stylesheet">
</head>
<body>
<%--@elvariable id="queryResult" type="com.red.entity.House"--%>
<div class="table-responsive">
	<form>
		<table id="list" class="table table-striped table-hover table-bordered">
			<thead>
			<tr>
				<th>ID</th>
				<th>状态</th>
				<th>名称</th>
				<th>价格</th>
				<th>地址</th>
				<th>详细地址</th>
				<th>描述</th>
			</tr>
			</thead>
			<tbody>
			<%--@elvariable id="queryResult" type="com.red.entity.House"--%>
			<c:forEach items="${queryResult}" var="house">
				<tr>
					<td type="house_id">
						<a href="${APP_PATH}/jsp/manage/house_view.jsp?update=${house.house_id}" target="_parent"
						   class="btn btn-primary btn-sm" style="display: none"><span
								class='glyphicon glyphicon-edit'
								aria-hidden='true'></span>
						</a>
						<input class="hidden" type="checkbox" name="house_id" value="${house.house_id}"><span><c:out
							value="${house.house_id}"/></span></td>
					<td type="status" class="status text-center">
						<c:if test="${house.status == '已出租'}">
							<span class="label label-danger"><c:out value="${house.status}"/></span>
						</c:if>
						<c:if test="${house.status == '未出租'}">
							<span class="label label-primary"><c:out value="${house.status}"/></span>
						</c:if>
						<c:if test="${house.status == '洽谈中'}">
							<span class="label label-info"><c:out value="${house.status}"/></span>
						</c:if>
					</td>
					<td type="house_name"><c:out value="${house.house_name}"/></td>
					<td type="price"><c:out value="${house.price}"/></td>
					<td type="address"><c:out value="${house.address}"/></td>
					<td type="detailed_address"><c:out value="${house.detailed_address}"/></td>
					<td type="description"><c:out value="${house.description}"/></td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
	</form>
</div>
<div id="page_navigation" class="text-center">
	<span>共 <span id="pages">${pageInfo.pages}</span> 页记录</span>
	<nav aria-label="Page navigation">
		<ul class="pagination">
			<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
			<li><a href="#" aria-label="Previous"><span aria-hidden="true"></span></a></li>
			<li><a href="#" aria-label="Previous"><span aria-hidden="true"></span></a></li>
			<li class="active"><a href="#" page="${pageInfo.curPage}"><c:out value="${pageInfo.curPage}"/></a></li>
			<li><a href="#" aria-label="Previous"><span aria-hidden="true"></span></a></li>
			<li><a href="#" aria-label="Previous"><span aria-hidden="true"></span></a></li>
			<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
		</ul>
	</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/paging.js"></script>
<script>
    let buttons = $("tr a")
    let trs = $("tbody tr")

    for (let i = 0; i < trs.length; i++) {
        buttons[i].onclick = function () {
            select(getHouseInfo(trs[i]))
        }

    }

    function select(data) {
        let obj = {};
        obj.key = "selected_house";
        obj.value = data;
        let str = JSON.stringify(obj); // 将对象转换为字符串
        localStorage.setItem(obj.key, str);
    }

    function getHouseInfo(tr) {
        let address = tr.children[4].innerText
        return {
            house_id: tr.children[0].children[2].innerText,
            house_name: tr.children[2].innerText,
            price: tr.children[3].innerText,
            detailed_address: tr.children[5].innerText,
            address_province: address.split(',')[0],
            address_city: address.split(',')[1],
            address_area: address.split(',')[2],
            description: tr.children[6].innerText,
        }
    }
</script>
</body>
</html>
